<template>
  <div class="app-container">
    <div class="section-box">
      <div class="section-title">{{$t('agent.agentDetailPayin')}}</div>

      <el-tabs v-model="payinActive">
        <el-tab-pane :label="$t('agent.agentPayin')"
          name="agentPayin">
          <el-table v-loading="payinLoading"
            :data="payinData">
            <el-table-column :label="$t('agent.transDate')"
              align="center"
              prop="createTime"
              min-width="160" />
            <el-table-column :label="$t('agent.exchangeName')"
              align="center"
              prop="exchangeName"
              min-width="160"
              show-overflow-tooltip />
            <el-table-column :label="$t('agent.userName')"
              align="center"
              prop="userName"
              min-width="160"
              show-overflow-tooltip />
            <el-table-column :label="$t('agent.accountName')"
              align="center"
              prop="accountName"
              :show-overflow-tooltip="true"
              min-width="160" />
            <el-table-column :label="$t('agent.AmountU')"
              align="center"
              prop="amount"
              min-width="160" />
            <!--
        <el-table-column :label="$t('agent.rate')"
          align="center"
          prop="rate"
          min-width="120" />
          -->
            <el-table-column :label="$t('agent.status')"
              align="center"
              prop="status"
              min-width="120">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.transfer_status"
                  :value="scope.row.status" />
              </template>
            </el-table-column>
          </el-table>

          <pagination v-show="payinTotal > 0"
            :total="payinTotal"
            :page.sync="payinParams.pageNum"
            :limit.sync="payinParams.pageSize"
            @pagination="getPayinData" />
        </el-tab-pane>
        <el-tab-pane :label="$t('agent.rpaPayin')"
          name="rpaPayin">
          <el-table v-loading="rpaPayinLoading"
            :data="rpaPayinData">
            <el-table-column :label="$t('fundAccount.amount')"
              align="center"
              prop="amount"
              min-width="120" />
            <el-table-column :label="$t('fundAccount.transDate')"
              align="center"
              prop="transactionDate"
              min-width="160" />
            <el-table-column :label="$t('fundAccount.transactionType')"
              align="center"
              prop="transactionType"
              min-width="160" />
            <el-table-column :label="$t('fundAccount.referenceNo')"
              align="center"
              prop="referenceNo"
              min-width="160" />

            <el-table-column :label="$t('fundAccount.fromBankCode')"
              align="center"
              prop="fromBankCode"
              :show-overflow-tooltip="true"
              min-width="160" />
            <el-table-column :label="$t('fundAccount.fromCardName')"
              align="center"
              prop="fromCardName"
              :show-overflow-tooltip="true"
              min-width="160" />
            <el-table-column :label="$t('fundAccount.fromCardNo')"
              align="center"
              prop="fromCardNo"
              :show-overflow-tooltip="true"
              min-width="160" />
            <el-table-column :label="$t('fundAccount.fromCardCompanyName')"
              align="center"
              prop="fromCardCompanyName"
              :show-overflow-tooltip="true"
              min-width="190" />
            <el-table-column :label="$t('fundAccount.fromIfscCode')"
              align="center"
              prop="fromIfscCode"
              :show-overflow-tooltip="true"
              min-width="160" />

            <el-table-column :label="$t('fundAccount.toBankCode')"
              align="center"
              prop="toBankCode"
              min-width="160"
              show-overflow-tooltip />
            <el-table-column :label="$t('fundAccount.toCardName')"
              align="center"
              prop="toCardName"
              min-width="160"
              show-overflow-tooltip />
            <el-table-column :label="$t('fundAccount.toCardNo')"
              align="center"
              prop="toCardNo"
              show-overflow-tooltip
              min-width="160" />
            <el-table-column :label="$t('fundAccount.toCardCompanyName')"
              align="center"
              prop="toCardCompanyName"
              show-overflow-tooltip
              min-width="180" />
            <el-table-column :label="$t('fundAccount.toIfscCode')"
              align="center"
              prop="toIfscCode"
              show-overflow-tooltip
              min-width="160" />
            <el-table-column :label="$t('common.createTime')"
              align="center"
              prop="createTime"
              min-width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
          </el-table>

          <pagination v-show="rpaPayinTotal > 0"
            :total="rpaPayinTotal"
            :page.sync="rpaPayinParams.pageNum"
            :limit.sync="rpaPayinParams.pageSize"
            @pagination="getRpaPayinData" />
        </el-tab-pane>
      </el-tabs>

    </div>

    <div class="section-box">
      <div class="section-title">{{$t('agent.agentDetailPayout')}}</div>

      <el-tabs v-model="payoutActive">
        <el-tab-pane :label="$t('agent.agentPayout')"
          name="agentPayout">
          <el-table v-loading="payoutLoadig"
            :data="payoutData">
            <el-table-column :label="$t('agent.transDate')"
              align="center"
              prop="transDate"
              min-width="160" />
            <el-table-column :label="$t('agent.transCode')"
              align="center"
              prop="transNo"
              min-width="160"
              show-overflow-tooltip />
            <el-table-column :label="$t('agent.exchangeName')"
              align="center"
              prop="exchangeName"
              min-width="160"
              show-overflow-tooltip />
            <el-table-column :label="$t('agent.toBeneName')"
              align="center"
              prop="toBeneName"
              :show-overflow-tooltip="true"
              min-width="160" />
            <el-table-column :label="$t('agent.toAccountName')"
              align="center"
              prop="toAccountNumber"
              :show-overflow-tooltip="true"
              min-width="160" />
            <el-table-column :label="$t('agent.toBankName')"
              align="center"
              prop="toBankName"
              :show-overflow-tooltip="true"
              min-width="160" />
            <el-table-column :label="$t('agent.toIfscCode')"
              align="center"
              prop="toIfscCode"
              :show-overflow-tooltip="true"
              min-width="160" />
            <el-table-column :label="$t('agent.AmountINR')"
              align="center"
              prop="amount"
              min-width="160" />
            <!--
        <el-table-column :label="$t('agent.rate')"
          align="center"
          prop="rate"
          min-width="120" />-->
            <el-table-column :label="$t('agent.transStatus')"
              align="center"
              prop="status"
              min-width="120">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.transfer_result_status"
                  :value="scope.row.status" />
              </template>
            </el-table-column>
          </el-table>

          <pagination v-show="payoutTotal > 0"
            :total="payoutTotal"
            :page.sync="payoutParams.pageNum"
            :limit.sync="payoutParams.pageSize"
            @pagination="getPayoutData" />
        </el-tab-pane>
        <el-tab-pane :label="$t('agent.rpaPayout')"
          name="rpaPayout">
          <el-table v-loading="rpaPayoutLoadig"
            :data="rpaPayoutData">
            <el-table-column :label="$t('fundAccount.amount')"
              align="center"
              prop="amount"
              min-width="120" />
            <el-table-column :label="$t('fundAccount.transDate')"
              align="center"
              prop="transactionDate"
              min-width="160" />
            <el-table-column :label="$t('fundAccount.transactionType')"
              align="center"
              prop="transactionType"
              min-width="160" />
            <el-table-column :label="$t('fundAccount.referenceNo')"
              align="center"
              prop="referenceNo"
              min-width="160" />

            <el-table-column :label="$t('fundAccount.fromBankCode')"
              align="center"
              prop="fromBankCode"
              :show-overflow-tooltip="true"
              min-width="160" />
            <el-table-column :label="$t('fundAccount.fromCardName')"
              align="center"
              prop="fromCardName"
              :show-overflow-tooltip="true"
              min-width="160" />
            <el-table-column :label="$t('fundAccount.fromCardNo')"
              align="center"
              prop="fromCardNo"
              :show-overflow-tooltip="true"
              min-width="160" />
            <el-table-column :label="$t('fundAccount.fromCardCompanyName')"
              align="center"
              prop="fromCardCompanyName"
              :show-overflow-tooltip="true"
              min-width="190" />
            <el-table-column :label="$t('fundAccount.fromIfscCode')"
              align="center"
              prop="fromIfscCode"
              :show-overflow-tooltip="true"
              min-width="160" />

            <el-table-column :label="$t('fundAccount.toBankCode')"
              align="center"
              prop="toBankCode"
              min-width="160"
              show-overflow-tooltip />
            <el-table-column :label="$t('fundAccount.toCardName')"
              align="center"
              prop="toCardName"
              min-width="160"
              show-overflow-tooltip />
            <el-table-column :label="$t('fundAccount.toCardNo')"
              align="center"
              prop="toCardNo"
              show-overflow-tooltip
              min-width="160" />
            <el-table-column :label="$t('fundAccount.toCardCompanyName')"
              align="center"
              prop="toCardCompanyName"
              show-overflow-tooltip
              min-width="180" />
            <el-table-column :label="$t('fundAccount.toIfscCode')"
              align="center"
              prop="toIfscCode"
              show-overflow-tooltip
              min-width="160" />
            <el-table-column :label="$t('common.createTime')"
              align="center"
              prop="createTime"
              min-width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
          </el-table>

          <pagination v-show="rpaPayoutTotal > 0"
            :total="rpaPayoutTotal"
            :page.sync="rpaPayoutParams.pageNum"
            :limit.sync="rpaPayoutParams.pageSize"
            @pagination="getRpaPayoutData" />
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>
</template>

<script>
import {
  uCoinRecordList,
  payeeDetailTransRecordList,
  rpaAgentPayin,
  rpaAgentPayout
} from "@/api/overview/agent.js";

export default {
  name: 'agentDetail',
  dicts: ["transfer_status", 'transfer_result_status'],
  data () {
    return {
      payinActive: 'agentPayin',
      payoutActive: 'agentPayout',

      payinData: [],
      payinLoading: false,
      payinParams: {},
      payinTotal: 0,

      rpaPayinData: [],
      rpaPayinLoading: false,
      rpaPayinParams: {},
      rpaPayinTotal: 0,

      payoutData: [],
      payoutLoadig: false,
      payoutParams: {},
      payoutTotal: 0,

      rpaPayoutData: [],
      rpaPayoutLoadig: false,
      rpaPayoutParams: {},
      rpaPayoutTotal: 0,
    }
  },
  watch: {
    '$route.query.refreshTime' (newValue) {
      if (newValue && this.$route.name == 'agentDetail') {
        this.initLoad()
      }
    },
  },
  created () {
    this.initLoad()
  },
  methods: {
    initLoad () {
      let query = this.$route.query
      this.payinParams = {
        pageNum: 1,
        pageSize: 10,
        exchangeId: query.exchangeId,
        startTime: query.startDate ? `${query.startDate} 00:00:00` : '',
        endTime: query.endDate ? `${query.endDate} 23:59:59` : '',
        recordType: 'payout'
      }
      this.rpaPayinParams = {
        pageNum: 1,
        pageSize: 10,
        toExchangeId: query.exchangeId,
        startDate: query.startDate ? query.startDate : '',
        endDate: query.endDate ? query.endDate : '',
      }
      this.payoutParams = {
        pageNum: 1,
        pageSize: 10,
        transStatus: '2',
        transDate: query.transDate,
        exchangeId: query.exchangeId
      }
      this.rpaPayoutParams = {
        pageNum: 1,
        pageSize: 10,
        fromExchangeId: query.exchangeId,
        startDate: query.startDate ? query.startDate : '',
        endDate: query.endDate ? query.endDate : '',
      }
      this.getPayinData()
      this.getPayoutData()

      this.getRpaPayinData()
      this.getRpaPayoutData()
    },
    getPayinData () {
      this.payinLoading = true;
      uCoinRecordList(this.payinParams).then(
        (response) => {
          this.payinData = response.rows;
          this.payinTotal = response.total;
          this.payinLoading = false;
        }
      );
    },
    // rpa payin
    getRpaPayinData () {
      this.rpaPayinLoading = true;
      rpaAgentPayin(this.rpaPayinParams).then(
        (response) => {
          this.rpaPayinData = response.rows;
          this.rpaPayinTotal = response.total;
          this.rpaPayinLoading = false;
        }
      );
    },
    getPayoutData () {
      this.payoutLoadig = true;
      payeeDetailTransRecordList(this.payoutParams).then(
        (response) => {
          this.payoutData = response.rows;
          this.payoutTotal = response.total;
          this.payoutLoadig = false;
        }
      );
    },
    // rap payout
    getRpaPayoutData () {
      this.rpaPayoutLoadig = true;
      rpaAgentPayout(this.rpaPayoutParams).then(
        (response) => {
          this.rpaPayoutData = response.rows;
          this.rpaPayoutTotal = response.total;
          this.rpaPayoutLoadig = false;
        }
      );
    },
  }
}
</script>

<style lang="scss" scoped>
.section-box {
  background-color: #fff;
  margin-bottom: 15px;
  padding: 20px;
  .section-title {
    font-size: 18px;
    color: #606266;
    font-weight: bold;
    margin-bottom: 20px;
  }
}
</style>
